<template>
  <div ref="print" class="fs14" style="width:800px; margin: 0 auto;">
    <div v-for="(items, index) in list" :key="index + 100">
      <!-- <h2 style="text-align: center;margin-top:15px">领料单</h2> -->
      <!-- 工单信息 -->
      <table class="bor-through">
        <tr>
          <div class="l" style="padding-left: -30px"><img :src="data.title" width="200px" height="15px" /></div>
          <td width="33%" align="center" height="24" style="font-size: 24px;"></td>
          <td width="33%" align="center" height="24" style="font-size: 30px;">领料单</td>
          <td width="33%" align="right" height="24" style="font-size:12px;"></td>
        </tr>
      </table>

      <table class="fs12" style="width:calc(100% - 50px);margin-left: 25px;">
        <tr>
          <td style="text-align:right;">打印时间:{{ nowTime }}</td>
        </tr>
      </table>

      <table class="bor fs12" style="width:calc(100% - 40px);margin-left: 25px;">
        <tr>
          <td style="width: 13%;text-align:left;">领料单号:</td>
          <td style="width: 13%;text-align:left;">{{ data.OUT_STOCK_NO }}</td>
          <td style="width: 13%;text-align:left;">服务顾问:</td>
          <td style="width: 20%;text-align:left;">{{ data.SERVICE_ADVISOR }}</td>
          <td style="width: 13%;text-align:left;">进厂时间:</td>
          <td style="width: 13%;text-align:left;">{{ data.RO_CREATE_DATE }}</td>
        </tr>
        <tr>
          <td style="width: 13%;text-align:left;">委托书:</td>
          <td style="width: 13%;text-align:left;">{{ data.RO_NO }}</td>
          <td style="width: 13%;text-align:left;">技师名称:</td>
          <td style="width: 20%;text-align:left;">{{ data.CHIEF_TECHNICIAN }}</td>
          <td style="width: 13%;text-align:left;">车主:</td>
          <td style="width: 13%;text-align:left;">{{ data.OWNER_NAME }}</td>
        </tr>
      </table>

      <!-- 车辆信息 -->
      <div style="height:10px;clear:both"></div>
      <table class="bor fs12" style="width:calc(100% - 40px);margin-left: 25px;">
        <tr>
          <td style="text-align:center;">车牌号码</td>
          <td style="text-align:center;">VIN</td>
          <td style="text-align:center;">发动机号</td>
          <td style="text-align:center;">车系</td>
          <td style="text-align:center;">车型</td>
          <td style="text-align:center;">进厂里程</td>
          <td style="text-align:center;">生产日期</td>
          <td style="text-align:center;">购车日期</td>
        </tr>
        <tr>
          <td style="text-align:center;">{{ data.LICENSE }}</td>
          <td style="text-align:center;">{{ data.VIN }}</td>
          <td style="text-align:center;">{{ data.ENGINE_NO }}</td>
          <td style="text-align:center;">{{ data.SERIES_NAME }}</td>
          <td style="text-align:center;">{{ data.MODEL_NAME }}</td>
          <td style="text-align:center;">{{ data.IN_MILEAGE }}</td>
          <td style="text-align:center;">{{ data.PRODUCT_DATE }}</td>
          <td style="text-align:center;">{{ data.SALES_DATE }}</td>
        </tr>
      </table>

      <!-- 配件信息 -->
      <div style="height:10px;clear:both"></div>
      <table class="bor fs12" style="width:calc(100% - 40px);margin-left: 25px;">
        <tr>
          <td style="text-align:center;">序号</td>
          <td style="text-align:center;">配件件号</td>
          <td style="text-align:center;">配件名称</td>
          <td style="text-align:center;">单价(元)</td>
          <td style="text-align:center;">数量</td>
          <td style="text-align:center;">金额(元)</td>
          <td style="text-align:center;">仓库</td>
          <td style="text-align:center;">库位</td>
        </tr>
        <tr v-for="(item, indexItem) in items.arr" :key="item.index + 'item'">
          <td style="text-align:center;">{{ item.index + 1 }}</td>
          <td style="text-align:center;">{{ item.PART_NO }}</td>
          <td style="text-align:center;">{{ item.PART_NAME }}</td>
          <td style="text-align:center;">{{ item.PART_SALES_PRICE.toFixed(2) }}</td>
          <td style="text-align:center;">{{ item.PART_QUANTITY.toFixed(2) }}</td>
          <td style="text-align:center;">{{ item.PART_SALES_AMOUNT.toFixed(2) }}</td>
          <td style="text-align:center;">{{ item.STORAGE_NAME }}</td>
          <td style="text-align:center;">{{ item.STORAGE_POSITION_CODE }}</td>
        </tr>
        <tr v-show="items.isLast">
          <td style="text-align:center;background:#f2f2f2;">合计(元)</td>
          <td style="text-align:center;background:#f2f2f2;"></td>
          <td style="text-align:center;background:#f2f2f2;"></td>
          <td style="text-align:center;background:#f2f2f2;"></td>
          <td style="text-align:center;background:#f2f2f2;">{{ totalQuantity }}</td>
          <td style="text-align:center;background:#f2f2f2;">{{ totalPrice }}</td>
          <td style="text-align:center;background:#f2f2f2;"></td>
          <td style="text-align:center;background:#f2f2f2;"></td>
        </tr>
      </table>

      <!-- 出货人 -->
      <div style="height:10px;clear:both"></div>
      <table class="fs12" style="width:calc(100% - 50px);margin-left: 25px;">
        <tr>
          <td style="text-align:left;">出库人:{{ data.SENDER }}</td>
          <td style="text-align:left;">领料人:{{ data.RECEIVER }}</td>
          <td style="text-align:left;">领料人签名:</td>
          <td style="text-align:left;"></td>
        </tr>
      </table>

      <p style="text-align:left;">本单一式三份</p>
      <div style="page-break-after: always;height: 0;">&nbsp;</div>
    </div>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
<script>
/**
 * @Author: 杨光宇
 * @Date: 20201/02/02
 **/
import moment from 'moment';
import Cookies from 'js-cookie';
import { getAppId } from '@/assets/js/auth';

export default {
  props: {
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      dealerName: Cookies.get('dealerName'),
      dealerAddress: Cookies.get('dealerAddress'),
      dealerPhone: Cookies.get('dealerPhone'),
      totalAmount: 0,
      totalCount: 0,
      list: []
    };
  },
  created() {
    this.handle();
  },
  computed: {
    totalPrice() {
      let total = 0;
      this.data.items.forEach(x => {
        total = Number(x.PART_SALES_AMOUNT) + total;
      });
      return total.toFixed(2);
    },
    totalQuantity() {
      let total = 0;
      this.data.items.forEach(x => {
        total = Number(x.PART_QUANTITY) + total;
      });
      return total.toFixed(2);
    },
    appId() {
      return getAppId();
    }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    },
    handle() {
      // this.data.title = require('@/assets/img/beijing.png');
      console.log(this.appId, 'this.appId');
      if (this.appId == 'beijing') {
        this.data.title = require('@/assets/img/beijing.png');
      } else {
        this.data.title = require('@/assets/img/arcfox.png');
      }
      let dataList = JSON.parse(JSON.stringify(this.data.items));
      for (let i = 0; i < dataList.length; i++) {
        dataList[i].index = i;
      }
      let isJust = this.data.items.length % 51 == 0;
      let number = Math.ceil((this.data.items.length + 1) / 51);
      this.number = number;
      for (let i = 1; i <= number; i++) {
        if (number == i) {
          let obj = {};
          if (isJust) {
            obj.arr = [];
          } else {
            obj.arr = dataList.splice(0, dataList.length);
          }
          obj.index = i;
          obj.isLast = true;
          this.list.push(obj);
        } else {
          let obj = {};
          obj.arr = dataList.splice(0, 51);
          obj.index = i;
          obj.isLast = false;
          this.list.push(obj);
        }
      }
    }
  },
  mounted() {
    console.log('打印=>data', this.data);
    this.$emit('onPrintTable', this.$refs.print.innerHTML);
  }
};
</script>
<style scoped></style>
